<template>
	<el-form class="mb-2">
		<el-form-item>
			<el-button icon="el-icon-delete" type="danger" @click="handleDelete(selectObjs)">{{ $t('basProcess.delete') }} </el-button>
		</el-form-item>
	</el-form>
	<el-table
		:data="state.dataList"
		v-loading="state.loading"
		border
		:cell-style="tableStyle.cellStyle"
		stripe
		highlight-current-row
		:header-cell-style="tableStyle.headerCellStyle"
		@sort-change="sortChangeHandle"
		:cell-class-name="tableRowClassName"
		@selection-change="selectionChangeHandle"
	>
		<el-table-column type="selection" width="40" align="center" />
		<el-table-column type="index" label="#" width="50" />
		<el-table-column prop="productionLineCode" :label="$t('basProcess.productionLineCode')" show-overflow-tooltip width="210">
			<template #default="scope">
				<el-button-group size="small">
					<el-button type="primary" class="w-[90px]">{{scope.row.productionLineCode}}</el-button>
					<el-button type="primary" class="w-[90px]" plain>{{scope.row.productionLineName}}</el-button>
				</el-button-group>
			</template>
		</el-table-column>
		<!-- <el-table-column prop="productionLineName" :label="$t('basProcess.productionLineName')" show-overflow-tooltip/> -->
		<el-table-column prop="locationCode" :label="$t('basProcess.locationCode')" show-overflow-tooltip/>
		<el-table-column prop="locationName" :label="$t('basProcess.locationName')" show-overflow-tooltip/>
		<!-- <el-table-column prop="locationTypeName" :label="$t('basProcess.locationTypeName')" width="115" show-overflow-tooltip/> -->
		<el-table-column prop="locationTypeCode" :label="$t('basProcess.locationTypeCode')" width="210"show-overflow-tooltip >
			<template #default="scope">
				<el-button-group size="small">
					<el-button type="info" class="w-[90px]">{{scope.row.locationTypeCode}}</el-button>
					<el-button type="info" class="w-[80px]" plain>{{scope.row.locationTypeName}}</el-button>
				</el-button-group>
			</template>
		</el-table-column>
	</el-table>
	<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
</template>

<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { getProcessLocationByPrdlineid } from '/@/api/platform/digital/basProcess';
import { useMessage } from '/@/hooks/message';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
// const emit = defineEmits(['refresh']);

const props = defineProps({});

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: getProcessLocationByPrdlineid,
});

let productionLine_Code = '';
let productionLine_Name = '';

// 刷新表格
const refresh = (lineid: any, productionLineCode: any, productionLineName: any) => {
	state.queryForm.prdlineid = lineid;
	getDataList();
};

// 新增表格
const addrefresh = (row: any, productionLineCode: any, productionLineName: any) => {
	row.forEach((element) => {
		if (state.dataList?.map((m) => m.locationCode).includes(element.locationCode)) {
			useMessage().error(t('basProcess.containsThisLocation') + element.locationCode);
		} else {
			state.dataList?.push({
				id: '',
				productionLineCode: productionLineCode,
				productionLineName: productionLineName,
				locationCode: element.locationCode,
				locationName: element.locationName,
				locationTypeName: element.locationTypeName,
				locationTypeCode: element.locationTypeCode,
			});
		}
	});
	// emit('refresh');
};

//新增的行标记为绿色
const tableRowClassName = ({ row, rowIndex }: { row: any; rowIndex: number }) => {
	if (row.id == '') {
		return 'success-row';
	}
	return '';
};

// 多选变量
const selectObjs = ref([]) as any;
const multiple = ref(true);
// 多选事件
const selectionChangeHandle = (objs: []) => {
	selectObjs.value = objs;
	multiple.value = !objs.length;
};
// 删除操作
const handleDelete = async (ids: Array<number>) => {
	if (ids?.length === 0) {
		return useMessage().warning(t('basProcess.selectDelete'));
	}

	try {
		selectObjs.value.forEach((element) => {
			var index = state.dataList?.map((m) => m.locationCode).indexOf(element.locationCode);
			if (index !== -1) {
				state.dataList.splice(index, 1);
			}
		});
		useMessage().success(t('basProcess.deleteSuccess'));
	} catch (err: any) {
		useMessage().error(t('basProcess.deleteFaild') + err.msg);
	}
	// emit('refresh');
};

const getdataformlist = () => {
	return state.dataList;
};

const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);

// 暴露变量
defineExpose({
	refresh,
	addrefresh,
	getdataformlist,
});
</script>

<style>
.success-row {
	background-color: #b3e19d !important;
}
</style>